import React from 'react';
import { Icon } from 'antd-mobile';
import styles from './summary.css';
import date from '../../../../../../framework/utils/date';

import moneyBagIcon from '../../../../../../icons/partTimeDetail/money-bag-icon.png';
import timeIcon from '../../../../../../icons/partTimeDetail/time-icon.png';
import addressIcon from '../../../../../../icons/partTimeDetail/address-icon.png';

const Summary = ({
  list,
  mapClick = ()=>{}
}) => {

  // console.log('list', JSON.stringify(list));

  const publishTimeS = date.delta(list.publishTimeA);

  return(
    <div className={styles.summaryBody}>
      <div className={styles.items}>
        <div className={styles.titleContent}>
          <div className={styles.titleName}>
            <span>{list.title}</span>
          </div>
        </div>
      </div>
      <div className={styles.items}>
        <div className={styles.titleContent}>
          <div className={styles.showPrice}>
            <img src={moneyBagIcon}/>
            <span className={styles.price}>{list.wage}{list.unitValue ? `/${list.unitValue}`:''}</span>
            {/* <span>/月</span> */}
          </div>
          <div className={styles.browseCount}>浏览数量: {list.viewCount}</div>
        </div>
        {/* <div className={styles.browseCount}>{publishTimeS}</div> */}
      </div>
      <div className={styles.demandList}>
        <div className={styles.demandItem}>
          <i></i>
          <span>{list.typeName}</span>
        </div>
        <div className={styles.demandItem}>
          <i></i>
          <span>招{list.offersNumber}人 <span style={{color:'#ff9900'}}>(已招{list.employ}人)</span></span>
        </div>
        <div className={styles.demandItem}>
          <i></i>
          <span>{list.sex}</span>
        </div>
        <div className={styles.demandItem}>
          <i></i>
          <span>{list.workExp}</span>
        </div>
      </div>
      <div className={styles.workTime}>
        <div className={styles.workTimeLabel}>
          <div className={styles.labelContent}>
            <img src={timeIcon}/>
            <span>工作时间：</span>
          </div>
        </div>
        <div className={styles.workTimeDate}>
          <span>{list.workDate}</span>
          <span style={{marginTop:'0.6em'}}>{list.workTime}</span>
        </div>
      </div>

      <div className={styles.items}
        onClick={() => mapClick(list.gpsAddress,list.gpsDistance.latitude,list.gpsDistance.longitude)}>
        <div className={styles.workTimeLabel}>
          <div className={styles.labelContent}>
            <div className={styles.labelContentLeft}>
              <img src={addressIcon}/>
              <span>工作地址：</span>
            </div>
            <div className={styles.addressName}>
              {/* {cutStr.cutString(list.workSite, 24)} */}
              {list.gpsAddress}
            </div>
            <div className={styles.address}>
              <span></span>
              <div className={styles.itemArrow}>
                <Icon type='right' size='md' color='#6A6A6A' />
              </div>
            </div>
          </div>
        </div>
      </div>

        <div id="containerZXC"></div>

    </div>
  )
}

export default Summary;
